<template>
	<view class="case_conversation">
		<view class="top-tab"></view>
		<!-- 搜索 -->
		<view class="uni-form">
			<view class="uni-form-item uni-column">
				<input type="text" name="eventName" class="uni-input" v-model="searchForm1.eventName" placeholder="请输入案件名称" autocomplete="off" />
				<image @click="searchEvent" src='@/static/city-manage/uni-search.png' class="icon_close"></image>
			</view>
		</view>
		<!-- 案件列表 -->
		<view class="task_list">
			<view class="task_item" v-if="eventData && eventData.length>0" v-for="(item, index) in eventData" :key="index">
				<view class="item_left">
					<image v-if="item.smallImgData && item.smallImgData.length>0" :src="img_item" v-for="(img_item, img_index) in item.smallImgData" :key="img_index" @click="seeImages(img_index, item.bigImgData)" mode="aspectFit"></image>
				</view>
				<view class="item_right">
					<view class="task_top">
						<view class="task_type">{{item.eventTypeLv2Name}}</view>
						<view class="details_btn" @click="eventDetails(item)">详情</view>
					</view>
					<view class="task_date">{{item.createTime}}</view>
					<view class="task_status">{{item.eventDealStatusName}}</view>
					<view class="task_desc">案件描述：{{item.eventDescribe}}</view>
					<view class="task_address">
						<view>案件地址：{{item.eventAddress}}</view>
						<image @click="toggleMap(item.gdx, item.gdy)" src="../../static/city-manage/uni-address.png"></image>
					</view>
				</view>
			</view>
			<!-- <view v-if="eventData && eventData.length === 0" class="nodata">暂时没有更多数据</view> -->
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<!-- 地图弹出层 -->
		<uni-popup ref="popupMap" type="center" :mask-click="false" background-color="#fff">
			<view class="popup-content">
				<image @click="closeToggleMap" class="close_map" src="../../static/city-manage/close_map.png"></image>
				<public-map ref="publicMapDialog" :gdx="gdx" :gdy="gdy"></public-map>
			</view>
		</uni-popup>

		<!-- 右上角搜索 -->
		<uni-drawer ref="showRight" mode="right" :width="300">
			<search-task @getTaskList="getTaskList"></search-task>
		</uni-drawer>
	</view>
</template>

<script>
	import {getCzryAllEventsOfTS} from '@/api/my_task';
	import publicMap from '@/pages/mycomponents/publicMap.nvue';
	import searchTask from '@/pages/mycomponents/searchTask.vue';
	import URL from '@/util/url.js'
	export default{
		components:{
			'public-map': publicMap,
			'search-task':searchTask
		},
		data () {
			return {
				//用户登录信息
				userInfo: uni.getStorageSync('userInfo'),
				searchForm1:{
					eventName:"",
				},
				eventData:[],
				bigImgData: [],
				smallImgData: [],
				imgUrl:URL.CASEIMAGE_URL,
				gdx: null,
				gdy: null,
				status: 'loading',
				pageSize: 10,
				pageNum: 1,
				total: 0
			}
		},
		onLoad(){
			//获取我的案件列表
			this.getTaskList();
		},
		//页面生命周期---监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(){
			//关闭地图
			this.$refs.popupMap.close();
			//打开筛选抽屉
			setTimeout(() => {
				this.$refs.showRight.open();
			}, 500);

		},
		onReachBottom() {
			if (this.pageSize * this.pageNum >= this.total) {
				this.status= 'noMore';
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status= 'loading';
			}

			setTimeout(() => {
				this.getTaskList();
			}, 300);
		},
		onPullDownRefresh() {
			this.resetParam();
			this.status= 'loading';
			this.getTaskList();
		},
		methods: {
			resetParam() {
				this.pageSize = 10;
				this.pageNum = 1;
				this.total = 20;
				this.eventData =[];
			},
			//查询案件
			searchEvent(){
				this.resetParam();
				this.status= 'loading';
				this.getTaskList();
			},
			//获取我的案件列表
			getTaskList(data){
				let options = null, _this = this;
				if(data === undefined){
					options = {
						eventName:this.searchForm1.eventName,
						deptCode: this.userInfo.dept.deptCode,
						pageSize: this.pageSize,
						pageNum: this.pageNum
					}
				}else if(data !== undefined){//data为searchTask子页面传过来的参数
					options = data;
				}
				uni.showLoading();
				getCzryAllEventsOfTS(options).then((res) => {
					if(res.code === 200){
						let eventData = res.rows;

						eventData.forEach((ele, index) => {
							let images = JSON.parse(ele.params.images.value);
							ele.smallImgData = [];
							ele.bigImgData = [];
							for(var i=0;i<images.length;i++){
								if(images[i].size_type === "0"){
									ele.smallImgData.push(this.imgUrl+images[i].path);
								}else if(images[i].size_type === "1"){
									ele.bigImgData.push(this.imgUrl+images[i].path);
								}
							}
						});

						this.eventData = [...this.eventData, ...eventData];
						this.total = res.total;

						if (this.pageSize * this.pageNum >= this.total) {
							this.status= 'noMore';
						} else {
							this.status= 'more';
						}
					}else{
						this.$tip.toast(res.msg);
					}
					uni.hideLoading();
					this.$refs.showRight.close();
					uni.stopPullDownRefresh();
				}).catch((error) => {
					uni.hideLoading();
					this.$refs.showRight.close();
					uni.stopPullDownRefresh();
				})
			},
			eventDetails(eventItem){
				uni.navigateTo({
					url: '/pages/my-task/eventDetails?eventItem='+ JSON.stringify(eventItem)
				})
			},
			//案件列表查看大图
			seeImages(index, bigImgData){
				let _this = this;
				uni.previewImage({
					urls: bigImgData,
					current: index,
					longPressActions: {
						//itemList: ['发送给朋友', '保存图片', '收藏'],//按钮的文字数组
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			//点击位置查看地图
			toggleMap(gdx, gdy){
				this.gdx = gdx;
				this.gdy = gdy;
				this.$refs.popupMap.open();
				//等元素渲染完成后再调地图
				setTimeout(()=> {
					this.$nextTick(() => {
						// #ifdef H5
						this.$refs.publicMapDialog.initMap();
						// #endif
					});
				},500);
			},
			//关闭弹出层
			closeToggleMap(){
				this.$refs.popupMap.close();
			}
		},
		watch:{

		}
	}
</script>

<style lang="scss">
	.case_conversation{

		.top-tab{
			height:60rpx;
			background:#c4534c;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			right: 0rpx;
			margin-top: 0px;
			/* #ifdef H5 */
			margin-top: 44px;
			/* #endif */
		}
		.uni-form{
			position: fixed;
			top: 0px;
			left: 0px;
			right: 0px;
			z-index: 9;
			background: white;
			border-radius: 20rpx;
			padding:20rpx;
			box-shadow: #b5cede 0px 0px 10px;
			margin: 0rpx 40rpx 0;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			.uni-form-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				border:1px solid #ccc;
				border-radius: 20rpx;
				padding: 0;
				.uni-input{
					height: 60rpx;
					border-radius: 20rpx;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right:10rpx;
				}
			}
		}
		.task_list{
			padding: 150rpx 0 20rpx;
			.nodata{
				text-align: center;
				color: $qj-color;
				font-size: 15px;
			}
			.task_item{
				margin: 0 44rpx;
				box-shadow: #b5cede 0px 0px 10px;
				background: white;
				border-radius: 20rpx;
				padding:20rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				.item_left{
					width: 164rpx;
					height:264rpx;
					padding: 10rpx;
					border: 1px solid #ccc;
					margin-right: 20rpx;
					image{
						width: 164rpx;
						height:100%;
					}
					image:first-child ~ image{
						display: none;
					}
				}
				.item_right{
					width: calc(100% - 208rpx);
					.task_top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.task_type{
							font-size: 32rpx;
							color: $qj-color;
						}
						.details_btn{
							width:84rpx;
							height: 52rpx;
							background-image: url(../../static/city-manage/uni-task-details.png);
							background-repeat: no-repeat;
							background-position: 100% 100%;
							background-size: 100%;
							text-align: center;
							color: #fff;
							line-height: 52rpx;
							font-size: 24rpx;
						}
					}
					.task_date{
						color: $qj-gary;
						font-size: 24rpx;
					}
					.task_status{
						color: #ff5722;
						font-size: 30rpx;
					}
					.task_desc, .task_address{
						color: $qj-black;
						font-size: 26rpx;
						text-align: justify;
					}
					.task_address{
						width: 100%;
						display: flex;
						flex-direction: row;
						view{
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							flex:1;
						}
						image{
							width:40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
	//地图弹出层
	.uni-popup__wrapper-box{
		.popup-content {
			background-color: #fff;
			padding: 20rpx;
			position: relative;
			width:640rpx;
			// #ifdef APP-PLUS
				height:1000rpx;
			// #endif
			// #ifdef H5
				height:1000rpx;
			// #endif
			.close_map{
				width:30rpx;
				height:30rpx;
				position: absolute;
				right: -24rpx;
				top: -22rpx;
				background: #fff;
				border: 4rpx solid #ccc;
				border-radius: 50%;
				padding: 10rpx;
				z-index: 999999;
			}

		}
	}

	//搜索抽屉
	.uni-drawer__content--visible{
		width: 600rpx !important;
	}
</style>
